<template>
  <span class="link el-link--danger" @click.stop="handleDelete">删除</span>
</template>

<script>
export default {
  name: 'delete-link', // 目录或资源的删除
  props: {
    deleteItem: {
      type: Object,
      required: true,
    },
  },
  methods: {
    handleDelete() {
      let [msgHTML, title] = [];
      if (this.deleteItem.type === 'ProductSnippet' || this.deleteItem.type === 'ProductLocalFile') {
        msgHTML = `<div>确认删除资源 <strong class="el-alert--error is-light is-bold">${this.deleteItem.title}</strong> 吗？</div>`;
        title = '删除资源';
      } else if (this.deleteItem.type === 'ProductFolder') {
        msgHTML = `<div>删除目录将会删除目录下的所有资源，</br>是否删除目录 <strong class="el-alert--error is-light is-bold">${this.deleteItem.title}</strong> ？</div>`;
        title = '删除目录';
      } else {
        this.$message.error('错误的类型');
        return;
      }

      this.$msgbox({
        title,
        message: msgHTML,
        dangerouslyUseHTMLString: true,
        showCancelButton: true, // 显示取消按钮
        customClass: 'confirm-left',
        confirmButtonText: '确定',
        confirmButtonLoading: false,
        confirmButtonClass: 'el-button--danger',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false, // 不允许通过点击遮罩层关闭
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            Object.assign(instance, {
              confirmButtonLoading: true,
              confirmButtonText: '正在删除...',
            });
            this.$api.spaceResources.delete({
              spaceId: this.deleteItem.space.id,
              resourceId: this.deleteItem.id,
            }).then(() => {
              this.$message.success('删除成功');
              this.$root.$emit('loadSidebarItemsCount');
              this.$emit('deletedResource', this.deleteItem);
            }).catch(() => {})
              .then(() => done());
          } else done();
        },
      });
    },
  },
};
</script>

<style></style>
